<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Create A Layout - Zend Framework Manual</title>

    <link href="../css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="../css/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <link href="../css/styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Zend Framework</h1>
<h2>Programmer's Reference Guide</h2>
<ul>
    <li><a href="../en/learning.quickstart.create-layout.html">Inglês (English)</a></li>
    <li><a href="../pt-br/learning.quickstart.create-layout.html">Português Brasileiro (Brazilian Portuguese)</a></li>
</ul>
<table width="100%">
    <tr valign="top">
        <td width="85%">
            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="learning.quickstart.create-project.html">Create Your Project</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="learning.quickstart.html">Zend Framework Quick Start</a></span><br />
                        <span class="home"><a href="manual.html">Programmer's Reference Guide</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="learning.quickstart.create-model.html">Create a Model and Database Table</a></div>
                    </td>
                </tr>
            </table>
<hr />
<div id="learning.quickstart.create-layout" class="section"><div class="info"><h1 class="title">Create A Layout</h1></div>
    

    <p class="para">
        You may have noticed that the view scripts in the previous sections were
        <acronym class="acronym">HTML</acronym> fragments- not complete pages. This is by design; we want our
        actions to return content only related to the action itself, not the application as a whole.
    </p>

    <p class="para">
        Now we must compose that generated content into a full <acronym class="acronym">HTML</acronym> page. We&#039;d
        also like to have a consistent look and feel for the application. We will use a global site
        layout to accomplish both of these tasks.
    </p>

    <p class="para">
        There are two design patterns that Zend Framework uses to implement layouts: <a href="http://martinfowler.com/eaaCatalog/twoStepView.html" class="link external">&raquo; Two Step View</a> and
        <a href="http://java.sun.com/blueprints/corej2eepatterns/Patterns/CompositeView.html" class="link external">&raquo; Composite
            View</a>. <em class="emphasis">Two Step View</em> is usually associated with the <a href="http://www.martinfowler.com/eaaCatalog/transformView.html" class="link external">&raquo; Transform View</a>
        pattern; the basic idea is that your application view creates a representation that is then
        injected into the master view for final transformation. The <em class="emphasis">Composite
            View</em> pattern deals with a view made of one or more atomic, application views.
    </p>

    <p class="para">
        In Zend Framework, <a href="zend.layout.html" class="link">Zend_Layout</a> combines the ideas behind
        these patterns. Instead of each action view script needing to include site-wide artifacts,
        they can simply focus on their own responsibilities.
    </p>

    <p class="para">
        Occasionally, however, you may need application-specific information in your site-wide view
        script. Fortunately, Zend Framework provides a variety of view
        <em class="emphasis">placeholders</em> to allow you to provide such information from your action
        view scripts.
    </p>

    <p class="para">
        To get started using <span class="classname">Zend_Layout</span>, first we need to inform our
        bootstrap to use the <span class="classname">Layout</span> resource. This can be done using the
        <strong class="command">zf enable layout</strong> command:
    </p>

    <pre class="programlisting brush: shell">
% zf enable layout
Layouts have been enabled, and a default layout created at
application/layouts/scripts/layout.phtml
A layout entry has been added to the application config file.
</pre>


    <p class="para">
        As noted by the command,
        <var class="filename">application/configs/application.ini</var> is updated, and
        now contains the following within the <b><tt>production</tt></b>
        section:
    </p>

    <pre class="programlisting brush: ini">
; application/configs/application.ini

; Add to [production] section:
resources.layout.layoutPath = APPLICATION_PATH &quot;/layouts/scripts&quot;
</pre>


    <p class="para">
        The final <acronym class="acronym">INI</acronym> file should look as follows:
    </p>

    <pre class="programlisting brush: ini">
; application/configs/application.ini

[production]
; PHP settings we want to initialize
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH &quot;/../library&quot;
bootstrap.path = APPLICATION_PATH &quot;/Bootstrap.php&quot;
bootstrap.class = &quot;Bootstrap&quot;
appnamespace = &quot;Application&quot;
resources.frontController.controllerDirectory = APPLICATION_PATH &quot;/controllers&quot;
resources.frontController.params.displayExceptions = 0
resources.layout.layoutPath = APPLICATION_PATH &quot;/layouts/scripts&quot;

[staging : production]

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
</pre>


    <p class="para">
        This directive tells your application to look for layout view scripts in
        <var class="filename">application/layouts/scripts</var>. If you examine your directory tree, you&#039;ll
        see that this directory has been created for you now, with the file
        <var class="filename">layout.phtml</var>.
    </p>

    <p class="para">
        We also want to ensure we have an XHTML DocType declaration for our application. To enable
        this, we need to add a resource to our bootstrap.
    </p>

    <p class="para">
        The simplest way to add a bootstrap resource is to simply create a protected method
        beginning with the phrase  <span class="methodname">_init</span>. In this case, we want to
        initialize the doctype, so we&#039;ll create an  <span class="methodname">_initDoctype()</span> method
        within our bootstrap class:
    </p>

    <pre class="programlisting brush: php">
// application/Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected function _initDoctype()
    {
    }
}
</pre>


    <p class="para">
        Within that method, we need to hint to the view to use the appropriate doctype. But where
        will the view object come from? The easy solution is to initialize the
        <span class="classname">View</span> resource; once we have, we can pull the view object from the
        bootstrap and use it.
    </p>

    <p class="para">
        To initialize the view resource, add the following line to your
        <var class="filename">application/configs/application.ini</var> file, in the section marked
        <b><tt>production</tt></b>:
    </p>

    <pre class="programlisting brush: ini">
; application/configs/application.ini

; Add to [production] section:
resources.view[] =
</pre>


    <p class="para">
        This tells us to initialize the view with no options (the &#039;[]&#039; indicates that the &quot;view&quot; key
        is an array, and we pass nothing to it).
    </p>

    <p class="para">
        Now that we have a view, let&#039;s flesh out our  <span class="methodname">_initDoctype()</span> method.
        In it, we will first ensure the <span class="classname">View</span> resource has run, fetch the view
        object, and then configure it:
    </p>

    <pre class="programlisting brush: php">
// application/Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected function _initDoctype()
    {
        $this-&gt;bootstrap(&#039;view&#039;);
        $view = $this-&gt;getResource(&#039;view&#039;);
        $view-&gt;doctype(&#039;XHTML1_STRICT&#039;);
    }
}
</pre>


    <p class="para">
        Now that we&#039;ve initialized <span class="classname">Zend_Layout</span> and set the Doctype, let&#039;s
        create our site-wide layout:
    </p>

    <pre class="programlisting brush: php">
&lt;!-- application/layouts/scripts/layout.phtml --&gt;
&lt;?php echo $this-&gt;doctype() ?&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
  &lt;title&gt;Zend Framework Quickstart Application&lt;/title&gt;
  &lt;?php echo $this-&gt;headLink()-&gt;appendStylesheet(&#039;/css/global.css&#039;) ?&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;header&quot; style=&quot;background-color: #EEEEEE; height: 30px;&quot;&gt;
    &lt;div id=&quot;header-logo&quot; style=&quot;float: left&quot;&gt;
        &lt;b&gt;ZF Quickstart Application&lt;/b&gt;
    &lt;/div&gt;
    &lt;div id=&quot;header-navigation&quot; style=&quot;float: right&quot;&gt;
        &lt;a href=&quot;&lt;?php echo $this-&gt;url(
            array(&#039;controller&#039;=&gt;&#039;guestbook&#039;),
            &#039;default&#039;,
            true) ?&gt;&quot;&gt;Guestbook&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;?php echo $this-&gt;layout()-&gt;content ?&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>


    <p class="para">
        We grab our application content using the  <span class="methodname">layout()</span> view helper, and
        accessing the &quot;content&quot; key. You may render to other response segments if you wish to, but
        in most cases, this is all that&#039;s necessary.
    </p>

    <p class="para">
        Note also the use of the  <span class="methodname">headLink()</span> placeholder. This is an easy
        way to generate the <acronym class="acronym">HTML</acronym> for &lt;link&gt; elements, as well as to keep
        track of them throughout your application. If you need to add additional CSS sheets to
        support a single action, you can do so, and be assured it will be present in the final
        rendered page.
    </p>

    <blockquote class="note"><p><b class="note">Note</b>: <span class="info"><b>Checkpoint</b><br /></span>
        

        <p class="para">
            Now go to &quot;http://localhost&quot; and check out the source. You should see your XHTML header,
            head, title, and body sections.
        </p>
    </p></blockquote>
</div>
        <hr />

            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="learning.quickstart.create-project.html">Create Your Project</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="learning.quickstart.html">Zend Framework Quick Start</a></span><br />
                        <span class="home"><a href="manual.html">Programmer's Reference Guide</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="learning.quickstart.create-model.html">Create a Model and Database Table</a></div>
                    </td>
                </tr>
            </table>
</td>
        <td style="font-size: smaller;" width="15%"> <style type="text/css">
#leftbar {
	float: left;
	width: 186px;
	padding: 5px;
	font-size: smaller;
}
ul.toc {
	margin: 0px 5px 5px 5px;
	padding: 0px;
}
ul.toc li {
	font-size: 85%;
	margin: 1px 0 1px 1px;
	padding: 1px 0 1px 11px;
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: center left;
}
ul.toc li.header {
	font-size: 115%;
	padding: 5px 0px 5px 11px;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 5px;
}
ul.toc li.active {
	font-weight: bold;
}
ul.toc li a {
	text-decoration: none;
}
ul.toc li a:hover {
	text-decoration: underline;
}
</style>
 <ul class="toc">
  <li class="header home"><a href="manual.html">Programmer's Reference Guide</a></li>
  <li class="header up"><a href="manual.html">Programmer's Reference Guide</a></li>
  <li class="header up"><a href="learning.html">Learning Zend Framework</a></li>
  <li class="header up"><a href="learning.quickstart.html">Zend Framework Quick Start</a></li>
  <li><a href="learning.quickstart.intro.html">Zend Framework &amp; MVC Introduction</a></li>
  <li><a href="learning.quickstart.create-project.html">Create Your Project</a></li>
  <li class="active"><a href="learning.quickstart.create-layout.html">Create A Layout</a></li>
  <li><a href="learning.quickstart.create-model.html">Create a Model and Database Table</a></li>
  <li><a href="learning.quickstart.create-form.html">Create A Form</a></li>
  <li><a href="learning.quickstart.conclusion.html">Congratulations!</a></li>
 </ul>
 </td>
    </tr>
</table>

<script type="text/javascript" src="../js/shCore.js"></script>
<script type="text/javascript" src="../js/shAutoloader.js"></script>
<script type="text/javascript" src="../js/main.js"></script>

</body>
</html>